<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  <style>

    * {
      margin: 0;
      padding: 0;
    }

    header {
      font-size: 2.5em;

      height: 80vh; /*如果浏览器不支持vh单位，则上面的500px可生效*/

      min-height: 300px;
      max-height: 1080px;

      background: url("./images/header-bg.jpg");
      background-position: 50% 0;
      background-repeat: no-repeat;
      background-size: cover;

      position: relative;

    }

    .header-text-container {
      text-align: center;
      color: white;
      text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);

      height: 100%;
    }

    .header-article_title {
      font-size: 2em;

    }

    .header-article_pub {
      display: block;
      font-size: 1em;
    }

    @media all and (max-width: 480px) {
      /*.header-article_title{
        font-size: 1em;
      }

      .header-article_pub {
        font-size: 0.5em;
      }*/

      header{
        font-size: 1.125rem;
      }

    }


  </style>

  <link rel="stylesheet" href="./css/flex.css">

</head>
<body>
<header>
  <div class="header-text-container flex-enable flex-column flex-justify-space-around">
    <div class="header-article_title">巨大的标题</div>
    <time class="header-article_pub">2015年3月10日</time>
  </div>
</header>
</body>
</html>
